import React, { Component } from 'react';
import { StaticToast } from 'pjh-mobile-ui';
import {  Empty } from "src/components/common";
import {mFetch} from 'min-bridge';
import column from '../column';
import './Category.scss';

class Category extends Component {
    constructor(props) {
        super(props);
        let columnItem = column.filter(v=>v.linkName === props.params.category);
        let inquireType = columnItem.length&&columnItem[0].inquireType || 1;
        this.state = {
            data: {},
            inquireType,
            initFlag:false
        }
    }
    
    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        // 提交请求
        const { inquireType } = this.state;
		const data = {
			method: "help.detail",
			bizContent: {
                inquireType
			}
		};

		mFetch.fetchJson({
			data,
			success: res => {
                if(!this.state.initFlag){
                    this.setState({initFlag:true});
                };
				if (res.code == "0000") {
                    this.setState({
                        data: res.data
                    }, () => {
                        // 操作dom
                        this.toggleDetail();
                    });
				} else {
					StaticToast.error(res.message);
				}
			}
		});
	}

    toggleDetail() {
        const h2 = document.querySelectorAll('h2');
        for (let i = 0; i < h2.length; i++) {
            h2[i].onclick = function (e) {
                if (this.classList.contains('show')) {
                    this.classList.remove('show');
                    this.nextElementSibling.style.display = 'none';
                } else {
                    this.classList.add('show');
                    this.nextElementSibling.style.display = 'block'
                }
                
           }
        }
    }
    
    render() {
        const { category } = this.props.params;
        const { inquireType, data,initFlag } = this.state;
        if(!initFlag){
            return  <Empty type="loading"/>;
        };
        return (
            <div className="help-detail">
                <div className="detail-panel">
                    {data.detail ? <div className="h-detail" dangerouslySetInnerHTML={{__html: data.detail}}/> : <Empty/>}
                </div>
            </div>
        );
    }
}

export default Category;